
<template>
  <n-grid x-gap="12" :cols="2">
    <n-gi>
      <n-input type="textarea" class="text" placeholder="json字符串" @change="handleChange" />
    </n-gi>
    <n-gi>
      <n-input type="textarea" class="text" placeholder="" readonly="true" v-model:value="data" />
    </n-gi>
  </n-grid>
</template>

<script  lang="ts">
import { defineComponent,ref,Ref  } from 'vue'


export default defineComponent({
  name: 'Json',
  setup() {
    let data = ref("");
    return {
      data,
      handleChange(v: string) {
        console.log(v)
        data.value =JSON.stringify(JSON.parse(v), null, '\t')
      }
    }
  }
})
</script>

<style scoped>
.text {
  text-align: left;
  height: 80vh;
}
</style>